import React from 'react'
import {Col, Row,Select,Checkbox} from "antd";

import {WeaLocaleProvider,WeaInput,WeaBrowser, WeaFormItem, WeaInputNumber, WeaSearchGroup, WeaSelect,WeaCheckbox} from "ecCom";
import EField_New from "../../../portal/elements/components/common/setting_new/content/base/EField_New";
import EOrderCol from "../../../portal/elements/components/common/setting_new/content/base/EOrderCol";

const getLabel = WeaLocaleProvider.getLabel;

export default class AddExtends extends React.Component{

    state = {

        eFieldNewVisible:false,
        orderFieldComponentVisible:false,
    }

    componentWillMount(){
        const {setSetting,setId} = this.props
        if(setId == -1){
            setSetting({
                showType:'1',
                headlinesStyleId: '1',
                directoryIds:'',
                directoryIdsReplaceData:'',
                imgWidth:'120',
                imgWidthType:'1',
                imgHeight:'108',
                imgHeightType:'1',
                autoHeight:false,
                topDocIds:'',
                topDocDatas:'',
                hasUnread:'0',
                orderField:[],
                orderby:'',
                orderDA:'',
                isOpenAttachment: '0',
                directoryIdsSelected : false,
                virtualDirectoryIdsSelected :false,
                docIdsSelected : false,
                virtualDocumentIds:'',
                docIds:''

            })
        }else{
            setSetting({'addVisiable':true})
        }
    }



    render(){
        const {data,setting,setSetting} = this.props
        let {eFieldNewDataSource=[],orderFields=[],openShowUnreadNumberOption,headlinesStyles=[]} = data
        const {showType,headlinesStyleId,imgWidth,imgWidthType,imgHeight,imgHeightType,autoHeight,directoryIdsReplaceData,eFieldNewUsedKeys=[],topDocDatas,hasUnread,orderField=[],isOpenAttachment,virtualDocumentIdsReplaceData,docIdsReplaceData,directoryIdsSelected,virtualDirectoryIdsSelected,docIdsSelected} = setting
        if(setting.orderFields){
            orderFields = setting.orderFields
        }

        let EFieldNew = <div></div>;
        const {eFieldNewVisible} = this.state
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    setSetting({
                        /* eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),*/
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),

                    });
                    this.setState(function(state,props){
                        return {
                            eFieldNewVisible:false
                        }
                    })
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNew = <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@rdmxp8`} {...eFieldNewProps}/>
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }

        let orderFieldComponent = <div></div>
        const {orderFieldComponentVisible} = this.state

        if (orderFieldComponentVisible) {
            const orderColProps = {
                orderColDataSource: _.cloneDeep(orderFields),
                orderColUsedKeys: _.cloneDeep(orderField),
                onOk: (data) => {
                    let orderby = ""
                    let orderDA = ""
                    for(let i= 0; i< data.orderColUsedKeys.length ;i++){
                        for(let j= 0; j< data.orderColDataSource.length ;j++){
                            if(data.orderColUsedKeys[i] == data.orderColDataSource[j].id){
                                orderby += ","+data.orderColDataSource[j].fieldColumn
                                orderDA += ","+data.orderColDataSource[j].orderType
                                break
                            }
                        }
                    }
                    if(orderby != ""){
                        orderby = orderby.slice(1)
                    }
                    if(orderDA != ""){
                        orderDA = orderDA.slice(1)
                    }
                    setSetting({
                        orderFields: _.cloneDeep(data.orderColDataSource),
                        orderField: _.cloneDeep(data.orderColUsedKeys),
                        orderby,
                        orderDA
                    });
                    this.setState(function(state,props){
                        return {
                            orderFieldComponentVisible:false
                        }
                    })
                },
                onCancel: () => {
                    this.setState({
                        orderFieldComponentVisible: false
                    });
                }
            };
            orderFieldComponent = <EOrderCol ecId={`${this && this.props && this.props.ecId || ''}_EOrderCol@ik0h3g`} {...orderColProps}/>
        }
        const orderFieldSelectedNames = [];
        for (let i = 0; i < orderField.length; i++) {
            for (let j = 0; j < orderFields.length; j++) {
                if (orderField[i] == orderFields[j].key) {
                    orderFieldSelectedNames.push(orderFields[j].fieldName+ '-' + (orderFields[j].orderType == '0' ? getLabel(340,'降序') : getLabel(339,'升序')));
                }
            }
        }

        const optionsShowType =
            [{
                key: "1",
                showname: getLabel(19525, '列表式')
            },{
                key: "2",
                showname: getLabel(387382,"列表式2")
            },{
                key: "3",
                showname: getLabel(82759, '左图式')
            },{
                key: "4",
                showname: getLabel(82760, '上图式')
            },{
                key: "5",
                showname: getLabel(82760, '上图式')+2
            },{
                key: "6",
                showname: getLabel(82760, '上图式')+3
            },{
                key: "7",
                showname: getLabel(387383, '摘要式')
            },{
                key: "8",
                showname: getLabel(387383, '摘要式')+2
            }]
        for(let i = 0 ;i <  headlinesStyles.length ;i++){
            headlinesStyles[i].key = headlinesStyles[i].id
            headlinesStyles[i].showname = headlinesStyles[i].styleName
        }

        let optionsHasUnread =
            [{
                key: "0",
                showname: getLabel(23857,'不显示')
            },{
                key: "1",
                showname: getLabel(507374,'显示未读标记')
            }]
        if(openShowUnreadNumberOption == '1'){
            optionsHasUnread =
                [{
                    key: "0",
                    showname: getLabel(23857,'不显示')
                },{
                    key: "1",
                    showname: getLabel(507374,'显示未读标记')
                },{
                    key: "2",
                    showname: getLabel(81437,'显示未读数量')
                }]
        }



        this.addExtendGroup = (
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@7rr88v`}  title={getLabel(20885, '内容来源')} needTigger={true} showGroup={true}>
                <div className="set-items">
                    <div style={{'margin-top':'10px'}}>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@56krtb`} >
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vdzfzu`} span={6} >
                                <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@eauxbe`}
                                    style={{marginLeft: '0px'}}
                                    checked={directoryIdsSelected}
                                    onChange={e => setSetting({'directoryIdsSelected':e.target.checked})}
                                >{getLabel(16398, '文档目录')} :</Checkbox>
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cr2imc`} span={18}>
                                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@ebjroh`}
                                    title={getLabel(386382,"请选择")}
                                    type="doccategory"
                                    replaceDatas={ directoryIdsReplaceData|| []}
                                    isSingle={false}
                                    onChange={(ids, names, datas) => {
                                        setSetting({directoryIds: ids, directoryIdsReplaceData: datas})
                                    }}
                                    layout={document.body}
                                />
                            </Col>
                        </Row>
                    </div>
                    <div style={{'margin-top':'10px'}}>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9fkyuk`} >
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@admqgl`} span={6} >
                                <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@q38rni`}
                                    style={{marginLeft: '0px'}}
                                    checked={virtualDirectoryIdsSelected}
                                    onChange={e => setSetting({'virtualDirectoryIdsSelected':e.target.checked})}
                                >{getLabel(20482, '虚拟目录')} :</Checkbox>
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pwbcmy`} span={18}>
                                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@21llap`}
                                    title={getLabel(386382,"请选择")}
                                    type="docdummy"
                                    replaceDatas={ virtualDocumentIdsReplaceData|| []}
                                    isSingle={false}
                                    onChange={(ids, names, datas) => {
                                        setSetting({virtualDocumentIds: ids, virtualDocumentIdsReplaceData: datas})
                                    }}
                                    layout={document.body}
                                />
                            </Col>
                        </Row>
                    </div>
                    <div style={{'margin-top':'10px'}}>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@gz2be8`} >
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@044rr4`} span={6} >
                                <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@4l7pkr`}
                                    style={{marginLeft: '0px'}}
                                    checked={docIdsSelected}
                                    onChange={e => setSetting({'docIdsSelected':e.target.checked})}
                                >{getLabel(20533, '指定文档')} :</Checkbox>
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t0whq8`} span={18}>
                                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@z6ytj4`}
                                    title={getLabel(386382,"请选择")}
                                    type="37"
                                    replaceDatas={ docIdsReplaceData|| []}
                                    isSingle={false}
                                    onChange={(ids, names, datas) => {
                                        setSetting({docIds: ids, docIdsReplaceData: datas})
                                    }}
                                    layout={document.body}
                                />
                            </Col>
                        </Row>
                    </div>
                </div>
            </WeaSearchGroup>
        )

        return (
            <div>
                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@q6s7zd`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kiuxgb`} span={6} >
                            <div>{getLabel(21653, '显示方式')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bxyjdv`} span={18}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@7llasx`}
                                options={optionsShowType}
                                value={showType}
                                onChange={(value)=>{
                                    if(value == '5'){
                                        setSetting({
                                            showType: value,
                                            headlinesStyleId: '1'
                                        });
                                    }else if(value == '7' ||value == '8'){
                                        setSetting({
                                            showType: value,
                                            eFieldNewUsedKeys:['7','10','11']
                                        });
                                    }else{
                                        setSetting({
                                            showType: value,
                                        });
                                    }

                                }}
                            />
                        </Col>
                    </Row>
                </div>
                {
                    showType == 5 ? (
                        <div style={{'margin-top':'10px'}}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@egeflb`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@simfdg`} span={6} >
                                    <div>{getLabel(127329, '头条样式')} :</div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@p63ga4`} span={18}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@0bdiej`}
                                        options={headlinesStyles}
                                        value={headlinesStyleId}
                                        onChange={(value)=>{
                                            setSetting({
                                                headlinesStyleId: value,
                                            });
                                        }}
                                    />
                                </Col>
                            </Row>
                        </div>
                    ) : null
                }
                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@te2q4j`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@weh1vv`} span={6} >
                            <div>{getLabel(507373,'标签页显示未读')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@sx2o42`} span={18}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@s0snpp`}
                                options={optionsHasUnread}
                                value={hasUnread}
                                detailtype={3}
                                onChange={value => {
                                    setSetting({hasUnread: value});
                                }}
                            />
                        </Col>
                    </Row>
                </div>

                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@f51uxg`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@80tz2y`} span={6} >
                            <div>{getLabel(23784, '文档置顶')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l5br3v`} span={18}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@kghhxm`}
                                type={37}
                                title={getLabel(386382, '请选择')}
                                isSingle={false}
                                replaceDatas={topDocDatas}
                                onChange={(ids, names, datas) => setSetting({topDocIds: ids, topDocDatas: datas})}
                                layout={document.body}
                            />
                        </Col>
                    </Row>
                </div>
                {
                    showType == 2 || showType== 3 || showType== 4 || showType== 5 || showType== 6 || showType== 7 || showType== 8 ? (
                        <div style={{'margin-top':'10px'}}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@n6t053`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9sn76q`} span={6} >
                                    <div>{getLabel(386551, '缩略图设置')} :</div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3r4578`} span={18}>
                                    <ul style={{lineHeight: '29px'}}>
                                        <li style={{display: 'inline-block'}}>
                                        <span>
                                                <span>{getLabel(386529, '宽度：')}</span>
                                                <div style={{display:'inline-block','width':'70px','vertical-align':'middle'}}>
                                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@jy2dz4`}
                                                        value={imgWidth}
                                                        style={{width: '60px', marginRight: '8px', marginBottom: '4px'}}
                                                        onChange={value => setSetting({'imgWidth': value})}
                                                    />
                                                </div>
                                                <div style={{display:'inline-block','width':'50px'}}>
                                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@szzvwy`}
                                                        className="portal-news-picture"
                                                        value={imgWidthType}
                                                        onChange={value => setSetting( {'imgWidthType': value })}
                                                        options={[
                                                            {
                                                                key: "1",
                                                                selected: true,
                                                                showname: "px"
                                                            },
                                                            {
                                                                key: "2",
                                                                selected: false,
                                                                showname: "%"
                                                            }
                                                        ]}
                                                        style={{width: '50px', marginRight: '8px', marginBottom: '4px'}}
                                                    />
                                                </div>

                                            {
                                                autoHeight ==false ?
                                                    (
                                                        <span style={{marginLeft: '20px','vertical-align':'middle'}}>
                                                        <span>{getLabel(386530, '高度：')}</span>
                                                        <div style={{display:'inline-block','width':'70px','vertical-align':'middle'}}>
                                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@flzh0a`}
                                                                value={imgHeight}
                                                                style={{width: '60px', marginRight: '8px', marginBottom: '4px'}}
                                                                onChange={value => setSetting( {'imgHeight': value})}
                                                            />
                                                        </div>
                                                        <div style={{display:'inline-block','width':'50px'}}>
                                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@no0xtl`}
                                                                className="portal-news-picture"
                                                                value={imgHeightType }
                                                                onChange={value => setSetting({'imgHeightType': value})}
                                                                options={[
                                                                    {
                                                                        key: "1",
                                                                        selected: true,
                                                                        showname: "px"
                                                                    },
                                                                    {
                                                                        key: "2",
                                                                        selected: false,
                                                                        showname: "%"
                                                                    }
                                                                ]}
                                                                style={{width: '50px', marginRight: '8px', marginBottom: '4px'}}
                                                            />
                                                        </div>
                                                    </span>
                                                    )
                                                    :""

                                            }
                                            <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@gzczla`}
                                                style={{marginLeft: '0px'}}
                                                checked={autoHeight}
                                                onChange={e => setSetting({'autoHeight':e.target.checked})}
                                            >{getLabel(22494, '自适应高度')}</Checkbox>
                            </span>
                                        </li>
                                    </ul>
                                </Col>
                            </Row>
                        </div>
                    ):""
                }

                {
                    showType == '7' || showType == '8' ? ''
                        : <div style={{'margin-top':'10px'}}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4n71uy`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pe0k8d`} span={6} >
                                    <div>{getLabel(19495, '显示字段')} :</div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@b5n6d0`} span={18}>
                                    {EFieldNew}
                                    <div style={{height: '100%', lineHeight: '23px'}}>
                                        <i className="icon-coms-Flow-setting portal-esetting-btn"
                                           style={{position: "relative", zIndex: "12",top:5}}
                                           onClick={() => this.setState({eFieldNewVisible: true})}/>
                                        <div
                                            title={eFieldNewUsedNames.join('，')} style={{marginTop:-18,"-webkit-line-clamp": 2,
                                            "-webkit-box-orient": "vertical",    "cursor": "pointer"}}>&nbsp;&nbsp;&nbsp;&nbsp;{eFieldNewUsedNames.join('，')}</div>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                }

                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4bn066`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pmo8o2`} span={6} >
                            <div>{getLabel(15512, '排序字段')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qyhm9k`} span={18}>
                            {orderFieldComponent}
                            <div style={{height: '100%', lineHeight: '23px'}}>
                                <i className="icon-coms-Flow-setting portal-esetting-btn"
                                   style={{position: "relative", zIndex: "12",top:5}}
                                   onClick={() => this.setState({orderFieldComponentVisible: true})}/>
                                <div
                                    title={orderFieldSelectedNames.join('，')} style={{marginTop:-18,"-webkit-line-clamp": 2,
                                    "-webkit-box-orient": "vertical",    "cursor": "pointer"}}>&nbsp;&nbsp;&nbsp;&nbsp;{orderFieldSelectedNames.join('，')}</div>
                            </div>
                        </Col>
                    </Row>
                </div>

                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ecfecr`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@v3ijgx`} span={6} >
                            <div>{getLabel(20895, '直接打开附件')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u87yyh`} span={18}>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@mj71oi`}
                                value={isOpenAttachment}
                                display="switch"
                                id='test'
                                style={{display: 'inline'}}
                                onChange={value => {
                                    setSetting({isOpenAttachment: value});
                                }}
                            />
                        </Col>
                    </Row>
                </div>


            </div>
        )
    }
}